<template>
  <div class="add-position-page">
    <h2 class="page-title">新增职务</h2>
    <el-button type="text" class="return-btn" @click="handleReturn">返回</el-button>

    <!-- 顶部表单区 -->
    <el-form class="top-form" label-width="80px" inline>
      <el-form-item label="职务名称">
        <el-input v-model="formData.positionName" placeholder="请输入角色名称" style="width: 240px;" />
      </el-form-item>
      <el-form-item label="职务描述">
        <el-input v-model="formData.positionDesc" style="width: 240px;" />
      </el-form-item>
      <el-form-item label="职务继承">
        <el-input v-model="formData.positionInherit" style="width: 240px;" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch 
          v-model="formData.status" 
          :active-value="true" 
          :inactive-value="false" 
          active-text="ON" 
          inactive-text="OFF" 
          active-color="#409eff"
        />
      </el-form-item>
      <el-form-item>
        <el-button 
          type="primary" 
          style="background-color: #409eff; border-color: #409eff;"
          @click="handleAdd"
        >
          添加
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 职务权限选择区 -->
    <div class="permission-section">
      <h3 class="section-title">职务权限</h3>
      <div class="permission-container">
        <!-- 左侧职务列表 -->
        <div class="position-list-container">
          <el-checkbox-group v-model="selectedPositions">
            <el-checkbox label="总经理">总经理</el-checkbox>
            <el-checkbox label="大区经理">大区经理</el-checkbox>
            <el-checkbox label="品牌总监">品牌总监</el-checkbox>
            <el-checkbox label="品牌经理">品牌经理</el-checkbox>
            <el-checkbox label="美容导师">美容导师</el-checkbox>
            <el-checkbox label="仓库管理员">仓库管理员</el-checkbox>
            <el-checkbox label="财务">财务</el-checkbox>
            <el-checkbox label="文员">文员</el-checkbox>
            <el-checkbox label="213">213</el-checkbox>
          </el-checkbox-group>
        </div>

        <!-- 右侧权限操作区 -->
        <div class="permission-actions">
          <div class="action-buttons">
            <el-button 
              type="primary" 
              style="background-color: #409eff; border-color: #409eff; margin-right: 10px;"
              @click="selectAllPermissions"
            >
              全选全部权限
            </el-button>
            <el-button 
              type="primary" 
              style="background-color: #409eff; border-color: #409eff;"
              @click="openDataPermissionDialog"
            >
              设置默认数据权限
            </el-button>
          </div>

          <!-- 品牌管理权限 -->
          <div class="permission-group">
            <el-checkbox v-model="brandManage" class="permission-group-title">品牌管理权限</el-checkbox>
            <div class="permission-items" v-show="brandManage">
              <el-checkbox-group v-model="brandAPermissions">
                <el-checkbox label="品牌A">品牌A</el-checkbox>
                <el-checkbox label="出货明细">出货明细</el-checkbox>
                <el-checkbox label="回款情况">回款情况</el-checkbox>
                <el-checkbox label="配送情况">配送情况</el-checkbox>
                <el-checkbox label="可查看各类美容院情况">可查看各类美容院情况</el-checkbox>
              </el-checkbox-group>
              
              <el-checkbox-group v-model="brandBPermissions">
                <el-checkbox label="品牌B">品牌B</el-checkbox>
                <el-checkbox label="出货明细">出货明细</el-checkbox>
                <el-checkbox label="回款情况">回款情况</el-checkbox>
                <el-checkbox label="配送情况">配送情况</el-checkbox>
                <el-checkbox label="可查看各类美容院情况">可查看各类美容院情况</el-checkbox>
              </el-checkbox-group>
              
              <el-checkbox-group v-model="brandCPermissions">
                <el-checkbox label="品牌C">品牌C</el-checkbox>
                <el-checkbox label="出货明细">出货明细</el-checkbox>
                <el-checkbox label="回款情况">回款情况</el-checkbox>
                <el-checkbox label="配送情况">配送情况</el-checkbox>
                <el-checkbox label="可查看各类美容院情况">可查看各类美容院情况</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>

          <!-- 美容院管理权限 -->
          <div class="permission-group">
            <el-checkbox v-model="salonManage" class="permission-group-title">可查看/管理的美容院</el-checkbox>
            <div class="permission-items" v-show="salonManage">
              <el-checkbox-group v-model="salonPermissions">
                <el-checkbox label="江苏南京-美容院A">江苏南京-美容院A</el-checkbox>
                <el-checkbox label="上海浦东-美容院A">上海浦东-美容院A</el-checkbox>
                <el-checkbox label="江苏南京-美容院B">江苏南京-美容院B</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>

          <!-- 员工管理权限 -->
          <div class="permission-group">
            <el-checkbox v-model="staffManage" class="permission-group-title">员工管理</el-checkbox>
            <div class="permission-items" v-show="staffManage">
              <div class="permission-columns">
                <el-checkbox-group v-model="staffPermissions1">
                  <el-checkbox label="添加员工信息">添加员工信息</el-checkbox>
                  <el-checkbox label="修改员工信息">修改员工信息</el-checkbox>
                  <el-checkbox label="删除员工信息">删除员工信息</el-checkbox>
                  <el-checkbox label="查看薪资标准">查看薪资标准</el-checkbox>
                  <el-checkbox label="查看以往薪资">查看以往薪资</el-checkbox>
                  <el-checkbox label="查看员工绩效考核">查看员工绩效考核</el-checkbox>
                  <el-checkbox label="查看员工当前考勤">查看员工当前考勤</el-checkbox>
                </el-checkbox-group>
                
                <el-checkbox-group v-model="staffPermissions2">
                  <el-checkbox label="查看员工历史考勤">查看员工历史考勤</el-checkbox>
                  <el-checkbox label="查看员工日总结">查看员工日总结</el-checkbox>
                  <el-checkbox label="查看员工月总结">查看员工月总结</el-checkbox>
                  <el-checkbox label="查看员工日计划">查看员工日计划</el-checkbox>
                  <el-checkbox label="查看员工月计划">查看员工月计划</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>

          <!-- 收银操作权限 -->
          <div class="permission-group">
            <el-checkbox v-model="cashierManage" class="permission-group-title">收银操作</el-checkbox>
            <div class="permission-items" v-show="cashierManage">
              <el-checkbox-group v-model="cashierPermissions">
                <el-checkbox label="新增收款单">新增收款单</el-checkbox>
                <el-checkbox label="修改收款单">修改收款单</el-checkbox>
                <el-checkbox label="删除收款单">删除收款单</el-checkbox>
                <el-checkbox label="查看今日收款情况">查看今日收款情况</el-checkbox>
                <el-checkbox label="查看历史收款情况">查看历史收款情况</el-checkbox>
                <el-checkbox label="冻结收款单账户">冻结收款单账户</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部确定按钮 -->
    <div class="bottom-actions">
      <el-button 
        type="primary" 
        style="background-color: #409eff; border-color: #409eff; margin-left: 90px;"
        @click="handleConfirm"
      >
        确定
      </el-button>
    </div>

    <!-- 设置数据权限弹框 -->
    <el-dialog 
      v-model="dataPermissionDialogVisible" 
      title="设置数据权限" 
      width="400px"
    >
      <div class="dialog-content">
        <p>请选择角色的数据权限:</p>
        <el-radio-group v-model="selectedDataPermission">
          <el-radio label="总经理">总经理</el-radio>
          <el-radio label="大区经理">大区经理</el-radio>
          <el-radio label="品牌总监">品牌总监</el-radio>
          <el-radio label="品牌经理">品牌经理</el-radio>
          <el-radio label="美容导师">美容导师</el-radio>
          <el-radio label="仓库管理员">仓库管理员</el-radio>
          <el-radio label="财务">财务</el-radio>
          <el-radio label="文员">文员</el-radio>
        </el-radio-group>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dataPermissionDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitDataPermission">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 表单数据
const formData = reactive({
  positionName: '',
  positionDesc: '3213',
  positionInherit: '',
  status: true
});

// 选中的职务（多选）
const selectedPositions = ref([]);

// 品牌管理权限
const brandManage = ref(true);
const brandAPermissions = ref(['品牌A', '出货明细', '回款情况', '配送情况', '可查看各类美容院情况']);
const brandBPermissions = ref(['品牌B', '出货明细', '回款情况', '配送情况', '可查看各类美容院情况']);
const brandCPermissions = ref(['品牌C', '出货明细', '回款情况', '配送情况', '可查看各类美容院情况']);

// 美容院管理权限
const salonManage = ref(true);
const salonPermissions = ref(['江苏南京-美容院A', '上海浦东-美容院A', '江苏南京-美容院B']);

// 员工管理权限
const staffManage = ref(false);
const staffPermissions1 = ref([]);
const staffPermissions2 = ref([]);

// 收银操作权限
const cashierManage = ref(true);
const cashierPermissions = ref(['新增收款单', '修改收款单', '删除收款单', '查看今日收款情况', '查看历史收款情况', '冻结收款单账户']);

// 设置数据权限弹框
const dataPermissionDialogVisible = ref(false);
const selectedDataPermission = ref('文员');

// 打开数据权限弹框
const openDataPermissionDialog = () => {
  dataPermissionDialogVisible.value = true;
};

// 提交数据权限
const submitDataPermission = () => {
  console.log('提交数据权限:', selectedDataPermission.value);
  dataPermissionDialogVisible.value = false;
};

// 全选所有权限
const selectAllPermissions = () => {
  brandManage.value = true;
  salonManage.value = true;
  staffManage.value = true;
  cashierManage.value = true;
  
  brandAPermissions.value = ['品牌A', '出货明细', '回款情况', '配送情况', '可查看各类美容院情况'];
  brandBPermissions.value = ['品牌B', '出货明细', '回款情况', '配送情况', '可查看各类美容院情况'];
  brandCPermissions.value = ['品牌C', '出货明细', '回款情况', '配送情况', '可查看各类美容院情况'];
  
  salonPermissions.value = ['江苏南京-美容院A', '上海浦东-美容院A', '江苏南京-美容院B'];
  
  staffPermissions1.value = ['添加员工信息', '修改员工信息', '删除员工信息', '查看薪资标准', '查看以往薪资', '查看员工绩效考核', '查看员工当前考勤'];
  staffPermissions2.value = ['查看员工历史考勤', '查看员工日总结', '查看员工月总结', '查看员工日计划', '查看员工月计划'];
  
  cashierPermissions.value = ['新增收款单', '修改收款单', '删除收款单', '查看今日收款情况', '查看历史收款情况', '冻结收款单账户'];
};

// 按钮点击事件
const handleReturn = () => {
  console.log('返回');
};

const handleAdd = () => {
  console.log('添加职务', formData);
};

const handleConfirm = () => {
  console.log('确认', {
    formData,
    selectedPositions: selectedPositions.value,
    brandManage,
    brandAPermissions,
    brandBPermissions,
    brandCPermissions,
    salonManage,
    salonPermissions,
    staffManage,
    staffPermissions1,
    staffPermissions2,
    cashierManage,
    cashierPermissions
  });
};
</script>

<style scoped>
.add-position-page {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
  position: relative;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.return-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #666;
}

/* 顶部表单样式 */
.top-form {
  margin-bottom: 25px;
  padding: 10px 0;
}

/* 权限区域样式 */
.permission-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.permission-container {
  display: flex;
  gap: 20px;
}

/* 左侧职务列表 */
.position-list-container {
  width: 120px;
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  max-height: 400px;
  overflow-y: auto;
}

.position-list-container .el-checkbox {
  display: block;
  margin-bottom: 10px;
}

/* 右侧权限操作区 */
.permission-actions {
  flex: 1;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  max-height: 400px;
  overflow-y: auto;
}

.action-buttons {
  margin-bottom: 20px;
}

/* 权限组样式 */
.permission-group {
  margin-bottom: 20px;
}

.permission-group-title {
  font-weight: 500;
  margin-bottom: 10px;
}

.permission-items {
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  margin-left: 20px;
}

/* 多列权限样式 */
.permission-columns {
  display: flex;
  gap: 30px;
}

/* 品牌权限样式 */
.brand-permissions {
  margin-bottom: 15px;
  padding-left: 10px;
}

/* 底部按钮样式 */
.bottom-actions {
  margin-top: 20px;
  margin-left: 90px;
}

/* 弹框样式 */
.dialog-content {
  margin-bottom: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 复选框样式调整 */
.el-checkbox {
  margin-right: 15px;
  margin-bottom: 8px;
}
</style>